kefu<template>
    <div>
  
        
        <div class="area">
            <div>
      <el-button type="primary"  v-show="state.piliangHtmlShow" @click="btnkeshihua">可视化界面</el-button>
          <el-input
          style="margin-top: 12px; height: 300px;border: 1 solid;"
          v-model="piliangHtmls"
          v-show="state.piliangHtmlShow"
          type="textarea"

            
          />
        </div>
      <div class="img-area">
       


        <div v-show="!state.piliangHtmlShow">
          <el-form-item label="">
            <div class="editor-wrapper">
              <!-- 新增包裹容器 -->
              <div
                ref="editorContainers"
                @input="getshixiang"
                class="custom-editor"
                style="height: 300px; width: 100%"
                 v-if="!state.piliangHtmlShow"
                v-html="goodsNote"
              ></div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex; justify-self: center;margin-top:20px;">
        <el-button type="primary" @click="btnName3">保存</el-button>
      </div>
        </div>

          <!-- 新增分页组件 -->
    
      </div>
    
  </template>
  
  <script lang="ts" setup>
const shoppingRef = ref(null)
  import { watch } from 'vue'
import { useRoute } from 'vue-router'

  import { Plus,WarningFilled } from "@element-plus/icons-vue";
  import Quill from "quill";
  import "quill/dist/quill.snow.css"; // 引入样式
  import type { UploadProps } from "element-plus";
  const editorContainer = ref("");
  import {

  getUploadFiles,

} from "~/base/api/product/productList.ts";
  import { setMemberDefault,getMyConfigInfo,
    indexSetSave,
    uploadForHttps,
    uploads,generalServiceSave,service,generalGoods
  } from "~/base/api/setup/index.ts";

  import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
  const state = reactive({
  piliangHtmlShow: false,
  rawHtmlContent: "", // 原始HTML内容
  editorContent: "",  // 编辑器内容
  quillInstance: null
})
const goodsNote=ref("")
const piliangHtmls=ref("")

  import {
    ElMessageBox,
    ElMessage,
    ElLoading,
    componentSizeMap,
  } from "element-plus";

const limitImg = ref(20);
const tableData=ref(
    [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

]
)
const total=ref(0)
const quillInstances = ref(null);
//初始化
  onMounted(() => {
    initQuills()
    
  });
  const editorContainers=ref("")
//获取到注意事项的数据
function getshixiang() {
  if (editorContainers.value) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(editorContainers.value.innerHTML, 'text/html');
    const qlEditor = doc.querySelector('div.ql-editor'); // 找到整个 div.ql-editor

    if (qlEditor) {
      console.log('完整的 div.ql-editor HTML:', qlEditor.innerHTML);
      piliangHtmls.value = qlEditor.innerHTML; // 赋值完整的 HTML
    } else {
      console.warn('未找到 div.ql-editor');
    }
  }
}
//保存批量修改注意事项
function btnName3() {
  console.log("res2222", editorContainers.value);
  let parm = {
    goodsNote: editorContainers.value.innerHTML,

  };
  console.log("parm", editorContainers.value);

//   editGoodsNoteForIds(parm).then((res) => {
//     if (res.code == 200) {
//       shangpingShow3.value = false;
//       getSetdocking();
//       ElMessage({
//         message: res.msg,
//         type: "success",
//       });
//     }
//   });
}
//批量注意事项
// 终极CSS覆盖方案
function forceChineseCSS() {
  const styleId = "quill-chinese-override-ultimate";
  if (document.getElementById(styleId)) return;

  const style = document.createElement("style");
  style.id = styleId;
  style.innerHTML = `
    /* ------ 全局覆盖 ------ */
    .ql-snow .ql-picker-label::before,
    .ql-snow .ql-picker-item::before {
      content: attr(data-value) !important;
    }
    
    /* 标题选择器 */
    .ql-snow .ql-picker.ql-header .ql-picker-label::before {
      content: "段落样式" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before {
      content: "标题1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before {
      content: "标题2" !important;
    }
    
    /* 字体选择器 */
    .ql-snow .ql-picker.ql-font .ql-picker-label::before {
      content: "字体" !important;
    }
    
    /* 字号选择器 */
    .ql-snow .ql-picker.ql-size .ql-picker-label::before {
      content: "字号" !important;
    }
  `;
  document.head.appendChild(style);
}

function initQuills() {
  // 1. 预加载CSS强制覆盖
  forceChineseCSS();

  // 2. 增强版汉化配置
  const ChineseLabels = {
    fonts: {
      "sans-serif": "默认",
      SimSun: "宋体",
      SimHei: "黑体",
      "Microsoft-YaHei": "微软雅黑",
      KaiTi: "楷体",
      FangSong: "仿宋",
      Arial: "Arial",
      "Times-New-Roman": "Times New Roman",
      "Courier-New": "Courier New",
    },
    sizes: {
      "10px": "小五",
      "12px": "小四",
      "14px": "小三",
      "16px": "小二",
      "18px": "小一",
      "24px": "二号",
      "36px": "一号",
    },
    formats: {
      normal: "正文",
      h1: "标题1",
      h2: "标题2",
      h3: "标题3",
      h4: "标题4",
      h5: "标题5",
      h6: "标题6",
    },
    toolbarTexts: {
      bold: "加粗",
      italic: "斜体",
      underline: "下划线",
      strike: "删除线",
      blockquote: "引用",
      code: "代码",
      list: "列表",
      ordered: "有序列表",
      bullet: "无序列表",
      script: "上下标",
      sub: "下标",
      super: "上标",
      indent: "缩进",
      direction: "方向",
      align: "对齐",
      link: "链接",
      image: "图片",
      video: "视频",
      clean: "清除格式",
      color: "文字颜色",
      background: "背景色",
      formula: "公式",
      font: "字体",
      size: "字号",
    },
  };

  // 注册字体和字号格式器
  const FontAttributor = Quill.import("attributors/class/font");
  FontAttributor.whitelist = Object.keys(ChineseLabels.fonts);
  Quill.register(FontAttributor, true);

  const SizeAttributor = Quill.import("attributors/class/size");
  SizeAttributor.whitelist = Object.keys(ChineseLabels.sizes);
  Quill.register(SizeAttributor, true);

  // 3. 完整汉化函数
  const fullLocalization = () => {
    // 字体下拉菜单汉化
    const fontPicker = editorContainers.value.querySelector(".ql-font");
    if (fontPicker) {
      document.querySelectorAll(".ql-font .ql-picker-item").forEach((item) => {
        const fontValue = item.getAttribute("data-value");
        if (fontValue && ChineseLabels.fonts[fontValue]) {
          item.innerHTML = ChineseLabels.fonts[fontValue];
          item.style.fontFamily = fontValue; // 确保预览效果正确
        }
      });

      const currentFont =
        quillInstances.value?.getFormat().font || "sans-serif";
      document.querySelector(".ql-font .ql-picker-label").innerHTML =
        ChineseLabels.fonts[currentFont] || "字体";
    }

    // 字号下拉菜单汉化
    const sizePicker = editorContainers.value.querySelector(".ql-size");
    if (sizePicker) {
      document.querySelectorAll(".ql-size .ql-picker-item").forEach((item) => {
        const sizeValue = item.getAttribute("data-value");
        if (sizeValue && ChineseLabels.sizes[sizeValue]) {
          item.innerHTML = ChineseLabels.sizes[sizeValue];
          item.style.fontSize = sizeValue; // 确保预览效果正确
        }
      });

      const currentSize =
        quillInstances.value?.getFormat().size ||
        Object.keys(ChineseLabels.sizes)[1];
      document.querySelector(".ql-size .ql-picker-label").innerHTML =
        ChineseLabels.sizes[currentSize] || "字号";
    }

    // 标题格式下拉菜单汉化
    const headerPicker = editorContainers.value.querySelector(".ql-header");
    if (headerPicker) {
      document
        .querySelectorAll(".ql-header .ql-picker-item")
        .forEach((item) => {
          const formatValue = item.getAttribute("data-value");
          if (formatValue && ChineseLabels.formats[formatValue]) {
            item.innerHTML = ChineseLabels.formats[formatValue];
          }
        });

      const currentFormat =
        quillInstances.value?.getFormat().header || "normal";
      document.querySelector(".ql-header .ql-picker-label").innerHTML =
        ChineseLabels.formats[`h${currentFormat}`] || "格式";
    }
  };

  // 4. 初始化流程（优化版）
  nextTick(() => {
    setTimeout(() => {
      console.log('Checking if container exists:', editorContainers.value);
      console.log('Checking if Quill exists:', typeof Quill);
      try {
        const Parchment = Quill.import("parchment");
        const Inline = Quill.import("blots/inline");
        const CodeBlock = Quill.import("formats/code-block");
        Quill.register(CodeBlock, true);

        const Font = Quill.import("formats/font");
        Font.whitelist = [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
        ];
        Quill.register(Font, true);
        const Size = Quill.import("attributors/style/size");
        Size.whitelist = ["10px", "12px", "14px", "16px", "18px"];
        Quill.register(Size, true);

        // 自定义代码格式
        class CodeBlot extends Inline {
          static create(value) {
            const node = super.create();
            node.setAttribute("class", "ql-code");
            return node;
          }
        }
        CodeBlot.blotName = "code";
        CodeBlot.tagName = ["code"];
        Quill.register(CodeBlot);
        // 注册代码块格式
        // const CodeBlock = Quill.import('formats/code-block');
        // Quill.register(CodeBlock, true);

        // 销毁旧实例
        if (quillInstances.value) quillInstances.value.destroy();
        // 3. 创建HTML按钮自定义处理函数
     
        const htmlHandler = () => {
          console.log('批量测试',quillInstances.value)
          state.piliangHtmlShow=true
          if (!quillInstances.value) return;
          console.log('22222')
          const range = quillInstances.value.getSelection();
          if (!range) return;
          
          const selectedText = quillInstances.value.getText(range.index, range.length);
          console.log('dddddd11111',selectedText)
          if (selectedText) {
            // 如果有选中文本，将选中文本转为HTML代码块
            const htmlContent = `<pre><code>${selectedText}</code></pre>`;
            quillInstances.value.deleteText(range.index, range.length);
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlContent);
          } else {
            // 如果没有选中文本，插入HTML代码块模板
            const htmlTemplate = `<pre><code><!-- 在此输入HTML代码 --></code></pre>`;
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlTemplate);
            // 将光标定位到可编辑区域
            quillInstances.value.setSelection(range.index + 4, 0);
          }
        };


        // 创建新实例
        quillInstances.value = new Quill(editorContainers.value, {
          theme: "snow",
          bounds: editorContainers.value,
          modules: {
            toolbar: {
              container: [
                ["code-block"], // 代码块按钮
                ["html-code"], // 自定义HTML按钮
                ["bold", "italic", "underline"],
                ["bold", "italic", "underline", "strike"],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [
                  { font: Object.keys(ChineseLabels.fonts) },
                  { size: Object.keys(ChineseLabels.sizes) },
                ],
                [{ color: [] }, { background: [] }],
                [{ script: "sub" }, { script: "super" }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ direction: "rtl" }, { align: [] }],
                ["blockquote", "code-block", "html-code"], // 添加自定义HTML按钮
                ["link", "image", "video", "formula"],
                ["clean"],
                
              ],
              handlers: {
                "html-code": htmlHandler, // 注册HTML按钮处理函数
              },
            },
            syntax: true, // 启用代码高亮
            clipboard: {
              matchVisual: false, // 防止粘贴时格式错乱
            },
          },

          formats: [
            "code",
            "code-block", // 确保code格式在允许的格式列表中
            "bold",
            "italic",
            "underline",
            "strike",
            "font",
            "size",
            "header",
            "script",
            "blockquote",
            "code-block",
            "list",
            "bullet",
            "ordered",
            "indent",
            "link",
            "image",
            "video",
            "color",
            "background",
            "align",
            "direction",
            "formula",
          ],
          placeholder: "请输入内容...",
        });

        const addHtmlButton = () => {
          console.log("11111");
          const toolbar = editorContainers.value.querySelector(".ql-toolbar");
          if (!toolbar) return;

          const htmlButton = document.createElement("button");
          htmlButton.className = "ql-html-code";
          htmlButton.innerHTML = '<i class="icon-code"></i>';
          htmlButton.title = "转换HTML/代码";
          htmlButton.onclick = (e) => {
            e.preventDefault();
            htmlHandler();
          };
          const codeBlockGroup = toolbar.querySelector(".ql-code-block");
          if (codeBlockGroup) {
            codeBlockGroup.parentNode.insertBefore(
              htmlButton,
              codeBlockGroup.nextSibling
            );
          } else {
            toolbar.appendChild(htmlButton);
          }
        };
        // 延迟添加按钮确保DOM加载完成
        setTimeout(addHtmlButton, 100);

        // 初始化工具栏汉化
        const initialToolbarTexts = {
          "html-code": "HTML代码",
          bold: ChineseLabels.toolbarTexts.bold,
          italic: ChineseLabels.toolbarTexts.italic,
          underline: ChineseLabels.toolbarTexts.underline,
          strike: ChineseLabels.toolbarTexts.strike,
          blockquote: ChineseLabels.toolbarTexts.blockquote,
          code: ChineseLabels.toolbarTexts.code,
          list: ChineseLabels.toolbarTexts.list,
          ordered: ChineseLabels.toolbarTexts.ordered,
          bullet: ChineseLabels.toolbarTexts.bullet,
          script: ChineseLabels.toolbarTexts.script,
          indent: ChineseLabels.toolbarTexts.indent,
          direction: ChineseLabels.toolbarTexts.direction,
          align: ChineseLabels.toolbarTexts.align,
          link: ChineseLabels.toolbarTexts.link,
          image: ChineseLabels.toolbarTexts.image,
          video: ChineseLabels.toolbarTexts.video,
          clean: ChineseLabels.toolbarTexts.clean,
          color: ChineseLabels.toolbarTexts.color,
          background: ChineseLabels.toolbarTexts.background,
          formula: ChineseLabels.toolbarTexts.formula,
        };

        Object.entries(initialToolbarTexts).forEach(([key, value]) => {
          if (key === "html-code") {
            const toolbar = editorContainers.value.querySelector(".ql-toolbar");
            if (toolbar) {
              // 检查按钮是否已经存在
              let button = toolbar.querySelector(".ql-html-code");
              if (!button) {
                button = document.createElement("button");
                button.className = "ql-html-code";
                button.title = value;
                button.innerHTML = "HTML";

                // 确保添加到适当的位置
                const codeBlockGroup = toolbar.querySelector(".ql-code-block");
                if (codeBlockGroup) {
                  codeBlockGroup.parentNode.insertBefore(
                    button,
                    codeBlockGroup.nextSibling
                  );
                } else {
                  toolbar.appendChild(button);
                }
              }
            }
          } else {
            const button = editorContainers.value.querySelector(`.ql-${key}`);
            if (button) button.title = value;
          }
        });

        // 初始化下拉菜单默认文本
        const fontPicker = document.querySelector(".ql-font .ql-picker-label");
        const sizePicker = document.querySelector(".ql-size .ql-picker-label");
        const headerPicker = document.querySelector(
          ".ql-header .ql-picker-label"
        );
        const alignPicker = document.querySelector(
          ".ql-align .ql-picker-label"
        );

        if (fontPicker) fontPicker.innerHTML = "字体";
        if (sizePicker) sizePicker.innerHTML = "字号";
        if (headerPicker) headerPicker.innerHTML = "格式";
        if (alignPicker) alignPicker.innerHTML = "对齐";

        // 初始化汉化
        fullLocalization();

        // 内容变化时重新汉化
        quillInstances.value.on("editor-change", () => {
          fullLocalization();
          forms.goods_info = quillInstances.value.root.innerHTML;
        });
      } catch (e) {
        console.error("编辑器初始化失败:", e);
      
      }
      console.log('Quill实例:', quillInstances.value)
    }, 50);
  });
  
}


  </script>
  <style>
  .el-input.is-disabled .el-input__wrapper {
    background: white !important;
  }
  .el-upload el-upload--picture-card{
    display: none !important;
  }
  .el-upload--picture-card{
    display: none !important;
  }
  </style>
  <style scoped>










  .table-areas{
    margin-top: 8px;
  }
  .deep .el-input.is-disabled .el-input__wrapper {
    background: white !important;
  }
  .order-titme {
  }
  
  .iconss {
    color: #999;
    cursor: pointer;
    position: relative;
    top: 3px;
  }
  .actives {
    background-color: #f0f7ff !important;
  }
  .iconss:hover {
    color: #1890ff;
  }
  
  .icons {
    font-size: 21px !important;
    position: relative !important;
    top: 18px !important;
    padding-right: 28px !important;
    left: 12px !important;
  }
  
  .icons2 {
    font-size: 50px !important;
    position: relative !important;
    top: 10px !important;
    padding-right: 28px !important;
    left: 12px !important;
  }
  
  .sanfang {
    margin-left: 12px;
    font-size: 11px;
    color: #1890ff;
    cursor: pointer;
  }
  .lie-top {
    display: flex;
    justify-content: center;
  }
  .lie-input {
    width: 100%;
    background-color: white;
  }
  .orders-names {
  }
  
  .order-names {
    display: flex;
    margin-top: 15px;
  }
  
  .order-information {
  }
  
  .order-detail {
    height: 142px;
    border-bottom: 1px solid #3333;
    margin-top: 10px;
    font-size: 13px;
    padding-bottom: 14px;
  }
  
  .activeTab {
    border-bottom: 1px solid #1890ff !important;
    color: #1890ff !important;
  }
  
  .activeTabs {
    border-bottom: 1px solid #1890ff !important;
    color: #1890ff !important;
  }
  
  .area-tab {
    display: flex;
    position: relative;
    left: -28px;
  }
  .area-tabs {
    height: 50vh;
    overflow: auto;
  }
  
  .area-name {
    margin-left: 30px;
    cursor: pointer;
    height: 31px;
  }
  
  .areas-header {
    height: 32px;
    border-bottom: 1px solid #3333;
    width: 100%;
  }
  
  .bianhao {
    margin-top: 16px;
    margin-left: 9px;
    font-size: 13px;
  }
  
  .right-name {
    margin-left: 8px;
  }
  
  .areas {
    width: 98%;
    margin: 0 auto;
  
    margin-top: 40px;
  }
  
  .quxiao {
    /* color: white;
            background-color: rgba(0, 0, 0, .65); */
    font-size: 12px;
    margin-top: 8px;
  }
  
  .type-name {
    margin-left: 80px;
  }
  .imgs {
    width: 70px;
    height: 70px;
    position: relative;
    top: 4px;
    border-radius: 6px;
  }
  .area-left {
    width: 24%;
  }
  .lefts {
    width: 84%;
    border: 1px solid #3333;
    height: 300px;
    margin-left: 18px;
    position: relative;
    top: 23px;
    border-radius: 8px;
  }
  .xx {
    position: absolute;
    right: -4px;
    color: red;
    top: -7px;
    cursor: pointer;
  }
  .types {
    display: flex;
    margin-top: 30px;
    position: relative;
  
    font-size: 13px;
  }
  .inputs2 {
    width: 60vw;
    padding-left: 12px;
  }
  
  .imgsleft {
    width: 70px;
    height: 70px;
  }
  
  .img-left {
    width: 9%;
  }
  
  .img-content {
    margin-top: 12px;
    display: flex;
  }
  
  .contents-title {
    display: flex;
    margin-top: 14vh;
    justify-content: space-between;
  }
  
  .unbers {
    color: #1890ff;
    background-color: #e8f4ff;
    border-color: #d1e9ff;
    margin-left: 12px;
    font-size: 11px;
    height: 22px;
    width: 56px;
    text-align: center;
  }
  
  .ordername {
    color: #333;
    border: 1px solid #3333;
    border-color: #333;
    /* padding: 1px 9px 1px 9px; */
    margin-left: 12px;
    height: 22px;
    width: 56px;
    text-align: center;
    font-size: 11px;
    line-height: 22px;
  }
  
  .kami {
    color: #13ce66;
    background-color: #e7faf0;
    border-color: #d0f5e0;
    font-size: 11px;
    height: 22px;
    width: 56px;
    text-align: center;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  .shu2 {
    width: 3px;
    height: 20px;
    background-color: #1890ff;
    position: relative;
    top: 25px;
    left: -8px;
  }
  .zhuangtai {
    display: flex;
    margin-top: 12px;
    font-size: 13px;
  }
  .imgs {
    width: 50px;
    height: 50px;
    position: relative;
    top: 4px;
    border-radius: 6px;
  }
  .right-header {
    width: 100%;
    border: 1px solid #3333;
    height: 80px;
  }
  .rights {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    margin-top: 26px;
  }
  .shoyue {
    width: 72%;
    margin: 0 auto;
    margin-top: 12px;
    padding-left: 30px;
    padding-bottom: 2px;
    padding-top: 2px;
    cursor: pointer;
  }
  .left-header {
    height: 60px;
    width: 100%;
    line-height: 60px;
    border-bottom: 1px solid #3333;
  }
  .table-name {
    color: #1890ff;
    width: 60px;
    margin: 0 auto;
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    height: 23px;
    line-height: 23px;
  }
  
  .table-name2 {
    border-color: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 3px 5px 3px 9px;
    cursor: pointer;
  }
  
  .footerss {
    display: flex;
    width: 96%;
    margin: 0 auto;
    font-size: 13px;
  }
  .imglists {
    display: flex;
    margin-left: 9px;
    position: relative;
  }
  .footers {
    width: 98%;
    border: 1px solid #3333;
    margin: 0 auto;
    height: 100px;
    margin-top: 25px;
  }
  
  .tabname {
    color: #409eff !important;
    border-bottom: 2px solid #409eff !important;
  }
  
  .tab-name {
    margin-left: 18px;
    cursor: pointer;
    height: 30px;
  }
  .inputs {
    margin-top: 12px;
  }
  .header-area {
    display: flex;
    position: relative;
    left: -18px;
    top: 1px;
  }
  
  .names {
    background: #409eff !important;
    color: white !important;
    border: none !important;
  }
  
  .jiaoyi {
    background-color: #13ce66;
  }
  .rightimg {
  margin-left: 30px;
  height: 80px;
  width: 80px;
 margin-top: 20px;
  cursor: pointer;
}
.right-img {
  display: flex;
  flex-wrap: wrap;
}
  .header-name {
    font-size: 14px;
    padding-bottom: 18px;
  }
  
  .headers {
    display: flex;
    padding-bottom: 12px;
  }
  
  .m-2 {
    width: 160px;
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  
  .configurations {
    margin-top: 12px;
  }
  
  .configuration-area {
  }
  
  .dialog-footer {
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
  }
  
  .orders-name {
    margin-top: 12px;
  }
  
  .orders {
    margin-left: 12px;
  }
  
  .order-area {
    width: 98%;
    padding-bottom: 12px;
    border: 1px solid #409eff;
    background-color: #e8f4ff;
  }
  .zanwu {
    display: flex;
    justify-content: center;
    position: relative;
    top: 25vh;
  }
  .tabs-area {
    margin-top: 12px;
  }
  .he {
    margin-left: 12px;
    color: #1890ff;
    cursor: pointer;
  }
  .diolog-content {
  }
  
  .shu {
    width: 3px;
    height: 20px;
    background-color: #1890ff;
    position: relative;
    top: 19px;
  }
  
  .shuaxin {
    font-size: 12px;
    color: #409eff;
    padding-right: 2px;
    cursor: pointer;
  }
  
  .table-area {
    width: 98%;
    margin: 0 auto;
    margin-top: 30px;
  }
  
  .tabs-price {
    border: 1px solid #3333;
    padding: 5px 12px 3px 12px;
  }
  
  .timeShow {
    color: red !important;
  }
  
  .tabs {
    margin-left: 10px;
  }
  
  .tab-header {
    display: flex;
    width: 100%;
  }
  .info-area {
    display: flex;
    white-space: nowrap;
    width: 88%;
  
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  
    cursor: pointer;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
    text-align: center;
  }
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .custom-editor {
    flex-grow: 1; /* 编辑区域填充剩余空间 */
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .avatar-uploader {
    position: relative;
  
    left: 10px;
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
    background-color: #f5f7fa;
  }
  .info-area2 {
  }
  .info-area:hover {
    color: #1890ff;
  }
  .area {
    width: 100%;
    background-color: white;
    padding-bottom: 28px;
    margin-top: 18px;
    padding-top: 14px;
    position: relative;
    top: -43px;
    left: -8px;
    z-index: 99;
  }
  
  .content {
    width: 96%;
    margin: 0 auto;
    height: 80vh;
    margin-top: 26px;
  }
  
  .header {
    background-color: white;
    padding: 17px 0 1px 12px;
    border-radius: 8px;
  }
  
  .is-loading {
    animation: rotating 2s linear infinite;
  }
  
  @keyframes rotating {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* 基础响应式设置 */
  .content {
    width: 96%;
    margin: 0 auto;
    margin-top: 26px;
    padding-bottom: 20px;
  }
  
  /* 表格区域响应式 */
  .table-area {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    overflow-x: auto;
  }
  
  /* 分页容器 */
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    overflow-x: auto;
  }
  .imgActive {
    border: 2px solid #409eff !important;
  border-color: #409eff !important; /* 选中时高亮边框 */
}
.imgActive2 {
    border: 2px solid #409eff !important;
  border-color: #409eff !important; /* 选中时高亮边框 */
}

.yuan {
  position: absolute;
  top: 24px;
  left: 85px;
  /* right: -49px; */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f56c6c;
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}
  /* 对话框内容 */
  .diolog-content {
    padding: 10px;
  }
  
  /* 标签页区域 */
  .tabs-area {
    margin-top: 12px;
  }
  
  /* 配置区域 */
  .configurations {
    margin-top: 12px;
  }
  
  /* 对话框底部按钮 */
  .dialog-footer {
    margin: 20px auto 0;
    text-align: center;
  }
  .nameshopping {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70px;
    cursor: pointer;
    text-align: center;
  }
  .nameshopping:hover {
    color: #1890ff;
  }
  /* 订单区域 */
  .order-area {
    width: 100%;
    padding: 12px;
    border: 1px solid #409eff;
    background-color: #e8f4ff;
    box-sizing: border-box;
  }
  .tblas {
  }
  /* 刷新按钮样式 */
  .shuaxin {
    font-size: 12px;
    color: #409eff;
    padding-right: 2px;
    cursor: pointer;
  }
  
  /* 加载动画 */
  .is-loading {
    animation: rotating 2s linear infinite;
  }
  
  @keyframes rotating {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  .tupians {
    display: flex;
  }
  /* 响应式调整 */
  @media (max-width: 768px) {
    /* 头部表单 */
    .header {
      padding: 10px;
    }
  
    /* 表单项目 */
    .el-form-item {
      width: 100%;
      margin-right: 0;
      margin-bottom: 10px;
    }
  
    /* 标签页 */
    .el-tabs {
      overflow-x: auto;
    }
  
    /* 对话框内容 */
    .diolog-content {
      padding: 5px;
    }
  
    /* 输入框宽度 */
    .el-input {
      width: 100% !important;
    }
  
    /* 表格操作按钮 */
    .el-table-column--fixed-right .el-button {
      margin-bottom: 5px;
    }
  
    /* 标签页头 */
    .tab-header {
      flex-direction: column;
    }
  
    .tabs {
      margin: 5px 0;
    }
  
    /* 对话框标题 */
    .el-dialog__title {
      font-size: 16px;
    }
  }
  
  /* PC端特定样式 */
  @media (min-width: 769px) {
    .content {
      /* max-width: 1200px; */
    }
  
    .table-area {
      width: 98%;
    }
  
    .diolog-content {
      min-width: 500px;
    }
  
    .el-form--inline .el-form-item {
      margin-right: 10px;
    }
  }
  .tutu {
  border: 1px solid #3333;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
 position: relative;
 left: -0px !important;
}
.img-area {
  display: flex;
}
.img-area {
  display: flex;
}
.mg-area {
  display: flex;
}
.img-left {
  width: 12%;
}
.img-right {
  flex: 1;
  padding-left: 30px;
}
.zanwu {
  margin-top: 30px;
  text-align: center;
}
.area-right {
  height: 53vh;
  margin-top: 20px;
  overflow: auto;
  margin-left: 12px;
}
.right {
  flex: 1;
}
.left {
  width: 30%;
  padding-right: 20px;
}
  </style>
  